<template>
  <div >
    <el-empty :image-size="200" v-if="showEmpty" description="暂无数据"></el-empty>
    <template v-for="blogInfo in blogInfos">
      <el-row class="allT myMain phoneStyle" :class="dayModel===true?'lColor':'bColor'">
      <el-col :sm={span:14} >
        <div class="titleFont" @click="goToPage(blogInfo.id)" :class="dayModel===true?'':'lFont'" v-text="blogInfo.title"></div>
        <div v-text="blogInfo.description" class="descriptionFont margin-t" :class="dayModel===true?'':'lFont1'">
        </div>
        <div class="dateFont margin-t">
          <span><i class="el-icon-date" style="padding-right: 0.3rem"></i><span v-text="blogInfo.updateDate"></span></span>
          <span style="margin-left: 2rem"><i class="el-icon-s-grid" style="padding-right: 0.3rem"></i><span v-text="blogInfo.name"></span></span>
        </div>
        <div class="margin-t" style="font-size: .6rem;">
          <i v-if="blogInfo.isTop||blogInfo.tagsName!=null" class="el-icon-collection-tag" style="margin-right: .3rem"></i>
          <el-tag v-if="blogInfo.isTop" effect="plain" size="mini"  style="border-color: red;color: red;">置顶</el-tag>
          <el-tag :class="blogInfo.isTop===true?'margin-l':''" v-for="tag in blogInfo.tagsName" :style="{color:tag.color}" v-text="tag.name" effect="plain" size="mini"></el-tag>
        </div>
      </el-col>
      <el-col :sm={span:6,offset:4} :xs=24 class="picStyle">
        <el-image :src="blogInfo.imageAddress" class="myImg" fit="cover"  width="150" height="100"></el-image>
      </el-col>
    </el-row>
    </template>
    <el-pagination v-if="!showEmpty" fit="cover" background style="text-align: center" :page-count="pages" layout="prev, pager, next" v-model:current-page="currentPage"></el-pagination>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "Main",
  data(){
    return {
      pages: null,
      currentPage: 1,
      blogInfos: [],
      showEmpty: false

    }
  },
  watch:{
    currentPage(value){
        this.jugle(value);
    },
    sId() {
      this.jugle(1);
    },
    tId(){
      this.jugle(1);
    }
  },
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    },
    sId(){
      return this.$store.state.sId;
    },
    tId(){
      return this.$store.state.tId;
    }
  },
  mounted(){
    this.$store.commit('setSid',-1);
    this.jugle(1);
  },
  methods: {
    jugle(currentPage){
      this.showEmpty = false;
      if ( this.tId === -1 && this.sId===-1)
        this.getBlogInfo(currentPage);
      else if ( this.tId != -1)
        this.getBlogInfoByTag(this.tId,currentPage);
      else if ( this.sId != -1)
        this.getBlogInfoByType(this.sId,currentPage);
    },
    goToPage(id){
      this.$router.push({
        name: 'page',
        query: {id: id}
      })
    },
    getBlogInfoByType(sId,currentPage){
      axios.get("/type/listBlog", {params: {sId: sId, currentPage: currentPage, pageSize: 10}}).then((res) => {
        this.blogInfos = res.data.records;
        if (res.data.total === 0) {
          this.showEmpty = true;
        }
      })
    },
    getBlogInfoByTag(tId,currentPage){
      axios.get("/tag/listBlog",{params:{tId:tId,currentPage:currentPage,pageSize:10}}).then( (res) => {
        this.blogInfos = res.data.records;
        this.currentPage = currentPage;
        this.pages = res.data.pages;
        if ( this.pages === 0){
          this.showEmpty = true;
        }
      })
    },
    getBlogInfo(currentPage){
      axios.get("/listBlogs",{params:{currentPage:currentPage,pageSize:10}}).then( (res) => {
        this.blogInfos = res.data.records;
        this.currentPage = res.data.current;
        this.pages = res.data.pages;
        if ( this.pages === 0){
          this.showEmpty = true;
        }
      })
    }
  }
}
</script>

<style scoped>
.margin-l {
  margin-left: 10px;
}
.lColor {
  background-color: white;
}
.bColor {
  background-color: #2f3133;
}
.lFont {
  color: white;
}
.lFont1 {
  color: gray !important;
}
.myMain {
  border-radius: 10px;
  padding: 10px 30px;
  margin-bottom: 20px;
  /*background-color: rgb(255,255,255);*/
}
.myImg {
  border-radius: 5px;
}
.titleFont {
  font-size: 20px;
  cursor: pointer;
  font-weight: 700;
}
.descriptionFont{
  display:-webkit-box;
  overflow:hidden;
  text-overflow:ellipsis;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size: 15px;
  color: rgba(84, 54, 107, 0.49);
}
a {
  text-decoration: none;
  color: black;
}
.dateFont {
  color: #646a7c;
  font-weight: 400;
  font-size: 10px;

}
.margin-t-big {
  margin-top: 50px;
}
.margin-t {
  margin-top: 10px;
}
</style>